<!-- 外部传入图表显示所需的json数据（包含样式和数据），根据传入属性直接显示图表 -->
<template>
  <div class="echartContainer" :id="chartId"> </div>
</template>
<script>
  import {
    toRefs,
    reactive,
    ref,
    onMounted,
    onUnmounted,
    onBeforeUnmount,
    watch,
    nextTick,
  } from 'vue';
  import * as echarts from 'echarts';
  import _ from 'lodash';

  export default {
    props: {
      echartData: Object, //传入echart中option配置
      chartName: { type: String, default: '' },
      isRoll: Boolean,
      showLoading: { type: Boolean, default: true }, //是否要显示loading
    },
    setup(props, context) {
      let myEchart = null;
      //窗口变化监听,避免resize多次执行卡顿
      var resizeTimer = null;
      const state = reactive({
        heightChart: 0,
        data: props.echartData,
        interval: null,
        chartId: props.chartName + Math.ceil(Math.random() * 100000000).toString(),
        observer: null,
      });

      onMounted(() => {
        myEchart = echarts.init(document.getElementById(state.chartId));
        //在nextTick中调用setOptions，避免出现图表第一次加载始终处于加载中状态
        nextTick(() => {
          setOptions();
          domChange();
        });
      });
      /**
       * 监听元素变化
       */
      const domChange = () => {
        let selfChart = document.getElementById(state.chartId);
        state.observer = new ResizeObserver(() => {
          myEchart.resize(); //ecahrts重置尺寸
        });
        state.observer.observe(selfChart); // 监听元素
      };
      /**监听数据改变,重新渲染 */
      watch(
        () => _.cloneDeep(props.echartData),
        (newProps) => {
          state.data = newProps;
          if (myEchart) {
            if (props.showLoading) {
              myEchart.showLoading();
              setTimeout(() => {
                myEchart.setOption(state.data);
                if (props.showLoading) {
                  myEchart.hideLoading();
                }
              }, 200);
            } else {
              myEchart.setOption(state.data);
            }
          }
        },
        { deep: true },
      );
      const setOptions = function () {
        myEchart.showLoading();
        setTimeout(() => {
          if (state.data) {
            myEchart.setOption(state.data);
            myEchart.getZr().on('click', function (param) {
              context.emit('backView', param);
            });
            myEchart.on('legendselectchanged', function (params) {
              context.emit('legendselectchanged', params);
            });
            myEchart.on('datazoom', function (params) {
              context.emit('datazoom', params);
            });

            if (props.isRoll) {
              if (state.data.dataZoom != null && state.data.dataZoom.length > 0) {
                if (state.data.dataZoom[0].endValue == state.data.yAxis[0].data.length) {
                  state.data.dataZoom[0].endValue = 4;
                  state.data.dataZoom[0].startValue = 0;
                } else {
                  state.data.dataZoom[0].endValue = state.data.dataZoom[0].endValue + 1;
                  state.data.dataZoom[0].startValue = state.data.dataZoom[0].startValue + 1;
                }
                myEchart.setOption(state.data);
              }
            }
            myEchart.hideLoading();
          }
        }, 300);
      };

      return {
        ...toRefs(state),
      };
    },
  };
</script>
<style lang="less" scoped>
  .echartContainer {
    width: 100%;
    height: 100%;
  }
</style>
